Blog

Form Validation with CBWIRE

Grant Copley December 19, 2022

Spread the word

Grant Copley

December 19, 2022

Spread the word


Share your thoughts

Form validation is something we as developers have to deal with all the time, and there are plenty of ways to go about it, some elegant and others not so much. ColdBox has a validation module called cbValidation for powerful form validation. We have this available to us in CBWIRE as well, which allows us to build forms with instant validation and messaging for the user without any page refreshing.

As we begin typing into our input field, we want the UI to immediately start validating, like this.

Once we've entered a valid email address, we want the validation error to go away.

Clicking 'Add Email' should show a success message.

This is quick to achieve with CBWIRE, and we don't need to write any JavaScript to do it.

Building Our UI Component

Let's create a UI component for our form. We'll call it EmailForm.cfc.

// Path: /wires/EmailForm.cfc
component extends="cbwire.models.Component" {

    this.constraints = {
        "email": { required: true, type: "email" }
    };

    data = {
        "email": "",
        "success": false
    };

    function addEmail() {
        validateOrFail();
        data.success = true;
    }
}

We can define what Data Properties we want to validate by defining this.constraints in our component.

    this.constraints = {
        "email": { required: true, type: "email" }
    };

Every time our component is updated, CBWIRE will look for these constraints and perform validation on them if they exists.

Notice we can also call validateOrFail() within our component actions. This will perform an additional validation and if there are any validation errors, prevent further processing.

    function addEmail() {
        validateOrFail();
        data.success = true;
    }

Now, let's add our UI Template.

<!--- Path: /views/wires/emailform.cfm --->
<cfoutput>
<div>
    <input wire:model="email" type="text" placeholder="Enter your email">
    <button wire:click="addEmail">Add Email</button>

    <cfif args.success>
        <div>Success!</div>
    </cfif>

    <cfif args.validation.hasErrors( "email" )>
        <cfloop array="#args.validation.getAllErrors( "email" )#" index="error">
            <div class="alert alert-danger mt-2">#error#</div>
        </cfloop>
    </cfif>
</div>
</cfoutput>

Notice that within our CBWIRE template, we have args.validation available to us. This is a validation result object that is returned from cbValidation.

<cfif args.validation.hasErrors( "email" )>

We are able to use any methods available to us on that validation result object, including hasErrors() and getAllErrors().

Using Our Component

Now we can include our email form anywhere we need it by using the wire() method.

<cfoutput>
<html>
    <head>
        <title>...</title>
        #wireStyles()#
    </head>
    <body>
        <!--- Include our EmailForm component here --->
        #wire( "EmailForm" )#
    </body>

    #wireScripts()#
</html>
</cfoutput>

That's really it. All of the validation features of cbValidation we have available to us, and with CBWIRE we can validate our forms instantly and reactively as users are entering in data.

Examples

As always, the docs is the best place to learn more about CBWIRE and it's validation features. https://cbwire.ortusbooks.com/component-features/validation

You can find this example as well as many others in our CBWIRE examples repo at https://github.com/grantcopley/cbwire-examples.

Go build something awesome!

Add Your Comment

Recent Entries

Partner with BoxLang and Ortus at Into the Box 2025: Empowering the Future of Modern Software Development!

Partner with BoxLang and Ortus at Into the Box 2025: Empowering the Future of Modern Software Development!

At Ortus Solutions, we’ve always been at the forefront of innovation in the ColdFusion ecosystem. From pioneering modern ColdFusion practices to developing cutting-edge tools and frameworks, we’ve been passionate to help and sup[port the community into shaping the future of web development.That’s why we decided to build BoxLang, our new JVM programming language that not only builds on the strengths of ColdFusion but takes modern software development to the next level.

Maria Jose Herrera
Maria Jose Herrera
December 23, 2024
Why BoxLang When You Have Kotlin, Groovy, Scala, and more…

Why BoxLang When You Have Kotlin, Groovy, Scala, and more…

As we approach a stable release of BoxLang and our continued marketing reaches more folks, many have asked about its purpose. Why create a new language when the JVM ecosystem already includes established languages like Kotlin, Groovy, and Scala, to name a few.

Luis Majano
Luis Majano
December 18, 2024